<script setup>
import {DeleteW, ListW, SaveW} from "@/utils/api/admin.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {onMounted, ref} from "vue";
import {dept, major} from "@/utils/model/graduate.js";

const data = ref([{
  sno: '',
  name: '',
  eno: '',
  enterpriseName: '',
  major: '',
  phone: '',
  info: '',
}]);
const visible = ref(false);
const seSno = ref();
const work = ref({
  sno: '',
  name: '',
  eno: '',
  enterpriseName: '',
  major: '',
  phone: '',
  info: '',
});

const list = () => {
  data.value = [];
  ListW(seSno.value).then(rs => {
    if (rs.code === 1) {
      data.value = rs.data;
    } else {
      ElMessage({
        message: '服务器错误',
        type: 'error',
      })
    }
  }).catch(error => console.error(error.toString()));
}

const openSave = () => {
  visible.value = true;
  work.value = {
    sno: '',
    name: '',
    eno: '',
    enterpriseName: '',
    major: '',
    phone: '',
    info: '',
  };
}

const save = () => {
  const w = work.value;
  if (w.sno === '' || w.name === '' || w.eno === '' || w.enterpriseName === '' ||
      w.major === '' || w.phone === '' || w.info === '') {
    ElMessage({
      message: '输入不能为空',
      type: 'error',
    });
    return;
  }
  SaveW(w.sno, w.name, w.eno, w.enterpriseName, w.major, w.phone, w.info).then(rs => {
    if (rs.code === 1) {
      ElMessage({
        message: '添加就业成功',
        type: 'success',
      })
      setTimeout(list,100)
    } else {
      ElMessage({
        message: '添加就业失败，请重试',
        type: 'warning',
      })
    }
    work.value = {};
  }).catch(error => console.error(error.toString()));
  visible.value = false;
}

const deleteW = (index) => {
  ElMessageBox({
    message: '确定删除该就业信息',
    type: 'warning',
  }).then(() => {
    DeleteW(data.value[index].sno).then(rs => {
      if (rs.code === 1) {
        data.value.splice(index, 1);
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
      } else {
        ElMessage({
          message: '删除失败，请重试',
          type: 'warning',
        })
      }
    }).catch(error => console.error(error.toString()));
  }).catch(() => {
  });
}

onMounted(() => {
  list();
})
</script>

<template>
  <el-form label-width="80px" inline>
    <el-form-item label="学 号">
      <el-input v-model="seSno"/>
    </el-form-item>
    <el-form-item>
      <el-button @click="list" type="primary">搜 索</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="data" border stripe max-height="560px" preserve-expanded-content>
    <el-table-column type="expand">
      <template #default="scope">
        <div class="info">
          <h4>就业信息:</h4>
          <div>{{ scope.row.info }}</div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sno" label="学号" width="120"/>
    <el-table-column prop="name" label="姓名" width="120"/>
    <el-table-column prop="eno" label="企业编号" width="200"/>
    <el-table-column prop="enterpriseName" label="企业名称"/>
    <el-table-column prop="major" label="专业" width="200"/>
    <el-table-column prop="phone" label="联系方式" width="150"/>
    <el-table-column label="操作" width="100" fixed="right">
      <template #header>
        <el-button type="primary" link @click="openSave">添加就业</el-button>
      </template>
      <template #default="scope">
        <el-button type="danger" link @click="deleteW(scope.$index)">删 除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="visible" width="600px" align-center draggable @close="work = {};"
             title="新增就业">
    <el-form label-width="80px">
      <el-form-item label="学 号">
        <el-input v-model="work.sno"/>
      </el-form-item>
      <el-form-item label="姓 名">
        <el-input v-model="work.name"/>
      </el-form-item>
      <el-form-item label="企业编号">
        <el-input v-model="work.eno"/>
      </el-form-item>
      <el-form-item label="企业名称">
        <el-input v-model="work.enterpriseName"/>
      </el-form-item>

      <el-form-item label="专 业">
        <el-select v-model="work.major" placeholder="">
          <el-option-group v-for="(d, index) in dept" :key="index" :label="d">
            <el-option v-for="(m, index) in major[d]" :key="index" :value="m" :label="m"/>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="work.phone"/>
      </el-form-item>
      <el-form-item label="就业信息">
        <el-input type="textarea" v-model="work.info" :rows="5" resize="none"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="save">保 存</el-button>
    </template>
  </el-dialog>

</template>

<style scoped>
.info {
  padding: 1px 1px 1px 20px;
}
</style>